<div class="gutterVMd2">
  <div class="contentBox padMd clrP clrBr clrSh3">
    <div class="flexHCent">
      <h2 class="h3 clrT"><%= ob.polyT('settings.pageTab.sectionPage') %></h2>
        <%= ob.processingButton({
        className: 'btn clrP clrBAttGrad clrBrDec1 clrTOnEmph modalContentCornerBtn js-save',
        btnText: ob.polyT('settings.btnSave')
      }) %>
    </div>
    <hr class="clrBr" />

    <div class="tabFormWrapper">
      <form class="box padMdKids padStack">
        <div class="flexRow gutterH">
          <div class="col3">
            <label for="settingsName" class="required"><%= ob.polyT('settings.name') %></label>
          </div>
          <div class="col6">
          <% if (ob.errors.name) print(ob.formErrorTmpl({ errors: ob.errors.name })) %>
            <input type="text" class="clrBr clrSh2" name="name" id="settingsName" value="<%= ob.name %>" placeholder="<%= ob.polyT('settings.pageTab.placeholderName') %>">
          </div>
        </div>
        <div class="flexRow gutterH TODO">
          <div class="col3">
            <label for="settingsHandle"><%= ob.polyT('settings.handle') %></label>
            <div class="clrT2 txSm"><%= ob.polyT('settings.pageTab.helperHandle') %></div>
          </div>
          <div class="col6">
            <% if (ob.errors.handle) print(ob.formErrorTmpl({ errors: ob.errors.handle })) %>
            <input type="text" class="clrBr clrSh2" name="handle" id="settingsHandle" value="<%= ob.handle %>" placeholder="<%= ob.polyT('settings.pageTab.placeholderHandle') %>">
            <div class="clrT2 txSm padSm"><%= ob.polyT('settings.pageTab.helperHandleRegister', { helperHandleRegisterLink: `<a href="https://onename.com" class="clrTEm">${ob.polyT('settings.pageTab.helperHandleRegisterLink')}</a>` }) %></div>
          </div>
        </div>
        <div class="flexRow gutterH">
          <div class="col3">
            <label for="settingsShortDescription"><%= ob.polyT('settings.shortDescription') %></label>
            <div class="clrT2 txSm"><%= ob.polyT('settings.pageTab.helperShortDescription') %></div>
          </div>
          <div class="col9">
            <% if (ob.errors.shortDescription) print(ob.formErrorTmpl({ errors: ob.errors.shortDescription })) %>
            <textarea rows="3" maxlength="160" name="shortDescription" id="settingsShortDescription"
                      class="clrBr clrSh2" placeholder="<%= ob.polyT('settings.pageTab.placeholderShortDescription') %>"><%= ob.shortDescription %></textarea>
          </div>
        </div>
        <div class="flexRow gutterH">
          <div class="col3">
            <label for="settingsLocation"><%= ob.polyT('settings.pageTab.locationLabel') %></label>
            <div class="clrT2 txSm"><%= ob.polyT('settings.pageTab.helperLocation') %></div>
          </div>
          <div class="col6">
            <% if (ob.errors.location) print(ob.formErrorTmpl({ errors: ob.errors.location })) %>
            <input type="text" class="clrBr clrSh2" name="location" id="settingsLocation" value="<%= ob.location %>" placeholder="<%= ob.polyT('settings.pageTab.placeholderLocation') %>" maxlength="<%= ob.max.locationLength %>">
          </div>
        </div>

        <div class="flexRow gutterH">
          <div class="col3">
            <label><%= ob.polyT('settings.avatar') %></label>
            <div class="clrT2 txSm"><%= ob.polyT('settings.loadAvatarHelp', {minWidth: ob.avatarMinWidth, minHeight: ob.avatarMinHeight}) %></div>
          </div>
          <div class="col9 contentBox clrBr clrP clrSh2 padLg">
            <div class="flexRow gutterH" id="avatarCropper">
              <div class="contentBox avatarPreview clrP clrBr2 clrSh1 flexNoShrink js-avatarPreview"></div>
              <div class="flexNoShrink">
                <div class="flexColRows gutterV">
                  <div>
                    <div class="flex gutterH">
                      <a class="iconBtn ion-reply flexExpand clrP clrBr clrSh2 disabled js-avatarLeft"></a>
                      <a class="iconBtn ion-forward flexExpand clrP clrBr clrSh2 disabled js-avatarRight"></a>
                    </div>
                  </div>
                  <div class="posR">
                    <input type="range" class="cropit-image-zoom-input disabled js-avatarZoom clrP" />
                  </div>
                  <div>
                    <input type="file" id="avatarInput" class="cropit-image-input hide" />
                    <label for="avatarInput" class="btn clrP clrBr clrSh2">
                      <%= ob.polyT('settings.loadAvatar') %>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="flexRow gutterH TODO">
          <div class="col3">
            <label><%= ob.polyT('settings.nsfwContent') %></label>
          </div>
          <div class="col9">
            <% if (ob.errors.nsfw) print(ob.formErrorTmpl({ errors: ob.errors.nsfw })) %>
            <div class="btnStrip">
              <div class="btnRadio clrBr">
                <input type="radio"
                       name="nsfw"
                       value="true"
                       id="settingsNSFWInputTrue"
                       data-var-type="boolean"
                <% if(ob.NSFW) { %>checked<% } %>>
                <label for="settingsNSFWInputTrue"><%= ob.polyT('settings.yes') %></label>
              </div>
              <div class="btnRadio clrBr">
                <input type="radio"
                       name="nsfw"
                       value="false"
                       id="settingsNSFWInputFalse"
                       data-var-type="boolean"
                <% if(!ob.NSFW) { %>checked<% } %>>
                <label for="settingsNSFWInputFalse"><%= ob.polyT('settings.no') %></label>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>


  <div class="contentBox padMd clrP clrBr clrSh3">
    <h2 class="h4 clrT"><%= ob.polyT('settings.pageTab.sectionAbout') %></h2>
    <hr class="clrBr" />
    <div class="tabFormWrapper">
      <form class="box padMdKids padStack">
        <div class="flexRow gutterH">
          <div class="col12">
            <% if (ob.errors.about) print(ob.formErrorTmpl({ errors: ob.errors.about })) %>
            <div contenteditable class="clrBr clrSh2" name="about" id="settingsAbout" placeholder="<%= ob.polyT('settings.pageTab.placeholderAbout') %>"><%= ob.about %></div>
            <div class="clrT2 txSm padSm"><%= ob.polyT('settings.pageTab.helperAbout') %></div>
          </div>
        </div>
      </form>
    </div>
  </div>

  <div class="contentBox padMd clrP clrBr clrSh3">
    <h2 class="h4 clrT"><%= ob.polyT('settings.pageTab.sectionLinks') %></h2>
    <hr class="clrBr" />
    <div class="tabFormWrapper">
      <form class="box padMdKids padStack">
        <div class="flexRow gutterH">
          <div class="col3">
            <label for="settingsWebsite"><%= ob.polyT('settings.website') %></label>
            <div class="clrT2 txSm"><%= ob.polyT('settings.pageTab.helperAbout') %></div>
          </div>
          <div class="col6">
            <% if (ob.errors['contactInfo.website']) print(ob.formErrorTmpl({ errors: ob.errors['contactInfo.website'] })) %>
            <input type="text" class="clrBr clrSh2" name="contactInfo.website" id="settingsWebsite"
                   value="<%= ob.contactInfo.website %>" placeholder="<%= ob.polyT('settings.pageTab.placeholderWebsite') %>">
          </div>
        </div>
        <div class="flexRow gutterH">
          <div class="col3">
            <label for="settingsEmail"><%= ob.polyT('settings.email') %></label>
            <div class="clrT2 txSm"><%= ob.polyT('settings.pageTab.helperAbout') %></div>
          </div>
          <div class="col6">
            <% if (ob.errors['contactInfo.email']) print(ob.formErrorTmpl({ errors: ob.errors['contactInfo.email'] })) %>
            <input type="text" class="clrBr clrSh2" name="contactInfo.email" id="settingsEmail" value="<%= ob.contactInfo.email %>" placeholder="<%= ob.polyT('settings.pageTab.placeholderEmail') %>">
          </div>
        </div>
        <div class="flexRow gutterH">
          <div class="col3"></div>
          <div class="col6">
            <% if (ob.errors['contactInfo.socialAccounts']) print(ob.formErrorTmpl({ errors: ob.errors['contactInfo.socialAccounts'] })) %>
          </div>
        </div>
        <div class="js-socialAccounts"></div>
      </form>
    </div>
  </div>

  <div class="contentBox padMd clrP clrBr clrSh3">
    <h2 class="h4 clrT"><%= ob.polyT('settings.pageTab.sectionTheme') %></h2>
    <hr class="clrBr" />
    <div class="tabFormWrapper">
      <form class="box padMdKids padStack">
        <div class="flexRow gutterH">
          <div class="col3">
            <label><%= ob.polyT('settings.header') %></label>
              <div class="clrT2 txSm"><%= ob.polyT('settings.loadHeaderHelp', {minWidth: ob.headerMinWidth, minHeight: ob.headerMinHeight}) %></div>
          </div>
          <div class="col9 row contentBox clrBr clrP clrSh2 pad">
            <div class="flexColRows gutterV" id="headerCropper">
              <div class="contentBox headerPreview clrP clrBr js-headerPreview"></div>
              <div>
                <div class="flexRow gutterH">
                  <div>
                    <div class="flex gutterH">
                      <a class="iconBtn ion-reply flexExpand clrP clrBr clrSh2 disabled js-headerLeft"></a>
                      <a class="iconBtn ion-forward flexExpand clrP clrBr clrSh2 disabled js-headerRight"></a>
                    </div>
                  </div>
                  <div class="posR">
                    <input type="range" class="cropit-image-zoom-input disabled js-headerZoom clrP" />
                  </div>
                  <div>
                    <input type="file" id="headerInput" class="cropit-image-input hide" />
                    <label for="headerInput" class="btn clrP clrBr clrSh2">
                      <%= ob.polyT('settings.loadHeader') %>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flexRow gutterH TODO">
          <div class="col3">
            <label for="settingsPrimaryColor" class="required"><%= ob.polyT('settings.primaryColor') %></label>
            <div class="clrT2 txSm"><%= ob.polyT('settings.pageTab.helperPrimaryColor') %></div>
          </div>
          <div class="col1">
              <input class="colorPicker clrBr js-colorPicker" id="primaryColorPicker"
                     data-hex-input-id="#settingsPrimaryColor" type="color" value="<%= ob.colors.primary %>"
                     placeholder="<%= ob.polyT('settings.pageTab.placeholderPrimaryColor') %>">
          </div>
          <div class="col2">
            <% if (ob.errors['colors.primary']) print(ob.formErrorTmpl({ errors: ob.errors['colors.primary'] })) %>
            <input type="text" class="clrBr clrSh2 js-colorCode" name="colors.primary" id="settingsPrimaryColor"
                   value="<%= ob.colors.primary %>" placeholder="<%= ob.polyT('settings.pageTab.placeholderPrimaryColor') %>"
                   data-color-picker-id="#primaryColorPicker">
          </div>
        </div>
        <div class="flexRow gutterH TODO">
          <div class="col3">
            <label for="settingsSecondaryColor" class="required"><%= ob.polyT('settings.secondaryColor') %></label>
            <div class="clrT2 txSm"><%= ob.polyT('settings.pageTab.helperSecondaryColor') %></div>
          </div>
          <div class="col1">
            <input class="colorPicker clrBr js-colorPicker" id="secondaryColorPicker"
                     data-hex-input-id="#settingsSecondaryColor" type="color" value="<%= ob.colors.secondary %>"
                     placeholder="<%= ob.polyT('settings.pageTab.placeholderSecondaryColor') %>">
          </div>
          <div class="col2">
            <% if (ob.errors['colors.secondary']) print(ob.formErrorTmpl({ errors: ob.errors['colors.secondary'] })) %>
            <input type="text" class="clrBr clrSh2 js-colorCode" name="colors.secondary" id="settingsSecondaryColor"
                   value="<%= ob.colors.secondary %>" placeholder="<%= ob.polyT('settings.pageTab.placeholderSecondaryColor') %>"
                   data-color-picker-id="#secondaryColorPicker">
          </div>
        </div>
        <div class="flexRow gutterH TODO">
          <div class="col3">
            <label for="settingsTextColor" class="required"><%= ob.polyT('settings.textColor') %></label>
            <div class="clrT2 txSm"><%= ob.polyT('settings.pageTab.helperTextColor') %></div>
          </div>
          <div class="col1">
            <input class="colorPicker clrBr js-colorPicker" id="textColorPicker"
                     data-hex-input-id="#settingsTextColor" type="color" value="<%= ob.colors.text %>"
                     placeholder="<%= ob.polyT('settings.pageTab.placeholderTextColor') %>">
          </div>
          <div class="col2">
            <% if (ob.errors['colors.text']) print(ob.formErrorTmpl({ errors: ob.errors['colors.text'] })) %>
            <input type="text" class="clrBr clrSh2 js-colorCode" name="colors.text" id="settingsTextColor"
                   value="<%= ob.colors.text %>" placeholder="<%= ob.polyT('settings.pageTab.placeholderTextColor') %>"
                   data-color-picker-id="#textColorPicker">
          </div>
        </div>
        <div class="flexRow gutterH TODO">
          <div class="col3">
            <label for="settingsHighlightColor" class="required"><%= ob.polyT('settings.highlightColor') %></label>
            <div class="clrT2 txSm"><%= ob.polyT('settings.pageTab.helperHighlightColor') %></div>
          </div>
          <div class="col1">
            <input class="colorPicker clrBr js-colorPicker" id="highlightColorPicker"
                     data-hex-input-id="#settingsHighlightColor" type="color" value="<%= ob.colors.highlight %>"
                     placeholder="<%= ob.polyT('settings.pageTab.placeholderHighlightTextColor') %>">
          </div>
          <div class="col2">
            <% if (ob.errors['colors.highlight']) print(ob.formErrorTmpl({ errors: ob.errors['colors.highlight'] })) %>
            <input type="text" class="clrBr clrSh2 js-colorCode" name="colors.highlight" id="settingsHighlightColor"
                   value="<%= ob.colors.highlight %>" placeholder="<%= ob.polyT('settings.pageTab.placeholderHighlightColor') %>"
                   data-color-picker-id="#highlightColorPicker">
          </div>
        </div>
        <div class="flexRow gutterH TODO">
          <div class="col3">
            <label for="settingsHighlightTextColor" class="required"><%= ob.polyT('settings.highlightTextColor') %></label>
            <div class="clrT2 txSm"><%= ob.polyT('settings.pageTab.helperHighlightTextColor') %></div>
          </div>
          <div class="col1">
            <input class="colorPicker clrBr js-colorPicker" id="highlightTextColorPicker"
                     data-hex-input-id="#settingsHighlightTextColor" type="color" value="<%= ob.colors.highlightText %>"
                     placeholder="<%= ob.polyT('settings.pageTab.placeholderHighlightTextColor') %>">
          </div>
          <div class="col2">
            <% if (ob.errors['color.highlightText']) print(ob.formErrorTmpl({ errors: ob.errors['color.highlightText'] })) %>
            <input type="text" class="clrBr clrSh2 js-colorCode" name="colors.highlightText" id="settingsHighlightTextColor"
                   value="<%= ob.colors.highlightText %>" placeholder="<%= ob.polyT('settings.pageTab.placeholderHighlightTextColor') %>"
                   data-color-picker-id="#highlightTextColorPicker">
          </div>
        </div>
      </form>
    </div>
  </div>

  <div class="contentBox padMd clrP clrBr clrSh3">
    <div class="flexHRight">
      <%= ob.processingButton({
        className: 'btn clrP clrBAttGrad clrBrDec1 clrTOnEmph js-save',
        btnText: ob.polyT('settings.btnSave')
      }) %>
    </div>
  </div>
</div>
